<template>
    <div id="home">
        <tab-nav></tab-nav>
        <!--顶部三栏-->
        <div class="top w clearfix">
            <!--左边-->
            <ul class="left-nav fl">
                <li><i class="iconfont">&#xe708;</i>中餐</li>
                <li><i class="iconfont">&#xe602;</i>快餐</li>
                <li><i class="iconfont">&#xe621;</i>烧烤</li>
                <li><i class="iconfont">&#xe6a4;</i>小吃</li>
                <li><i class="iconfont">&#xe6ac;</i>香锅</li>
                <li><i class="iconfont">&#xe708;</i>面食</li>
                <li><i class="iconfont">&#xe62b;</i>甜品</li>
                <li><i class="iconfont">&#xe612;</i>鸡排</li>
                <li><i class="iconfont">&#xe601;</i>更多</li>
                <li class="qrcode">
                    <a href="javascript:void(0);">
                        <img src="../../assets/images/erweima.png" alt="">
                    </a>
                </li>
            </ul>

            <!--中间-->
            <div class="mid-box fl">
                <div class="swiper-container" id="swiper-container1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="javascript:void(0);">
                                <img src="./images/banner01.png" alt="">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="javascript:void(0);">
                                <img src="./images/banner01.png" alt="">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="javascript:void(0);">
                                <img src="./images/banner01.png" alt="">
                            </a>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev swiper-button-white"></div>
                    <div class="swiper-button-next swiper-button-white"></div>
                </div>

                <!--中间下部分-->
                <!--品类展示大盒子-->
                <div class="showgoodness">
                    <!--品牌排行-->
                    <div class="rank">
                        <!--导航-->
                        <div class="com-title">
                            <span class="one">品牌排行</span>
                            <a href="#">灶掌柜</a>
                            <a href="#">五谷渔粉</a>
                            <a href="#">酸菜鱼米饭 </a>
                            <a href="#">煲百味</a>
                            <router-link class="rank-btn" to="/brand" tag="a">MORE</router-link>
                        </div>
                        <!--内容-->
                        <div class="com-content">
                            <a href="javascript:void(0);">
                                <img src="./images/rank01.jpg" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/rank02.jpg" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/rank03.jpg" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/rank04.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <!--精品推荐-->
                    <div class="recommend">
                        <!--导航-->
                        <div class="com-title">
                            <span class="one">精品推荐</span>
                            <a href="#">灶掌柜</a>
                            <a href="#">五谷渔粉</a>
                            <a href="#">酸菜鱼米饭 </a>
                            <a href="#">煲百味</a>
                            <router-link tag="a" to="/brand" class="rank-btn">MORE</router-link>
                        </div>
                        <!--内容-->
                        <div class="com-content">
                            <a href="javascript:void(0);">
                                <img src="./images/recommend01.jpg" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/recommend02.jpg" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/recommend03.jpg" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/recommend04.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!--右边的-->
            <!--右边的盒子-->
            <div class="right-box fr">
                <!--上-->
                <div class="rb-top">

                </div>
                <!--中-->
                <div class="rb-mid">
                    <!--标题-->
                    <div class="mid-title">
                        <p>品牌排行榜</p>
                        <p>BRAND RANKING</p>
                        <ul class="mid-nav">
                            <li>
                                <span>1</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>2</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>3</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>4</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>4</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>5</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>6</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>7</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>8</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                            <li>
                                <span>9</span>
                                <span>辣么棒</span>
                                <span></span>
                                <span>5178</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--下-->
                <div class="rb-bottom">
                    <!--tab栏-->
                    <!--<ul class="tab-nav clearfix">-->
                    <!--<li class="tab-active">资讯</li>-->
                    <!--<li>问答</li>-->
                    <!--</ul>-->
                    <!--<div class="tab-content">-->
                    <!--<div class="">-->
                    <!--<a href="#">全国百强餐饮企业一起齐聚...全国百强餐饮企业一起齐聚...</a>-->
                    <!--<a href="#">全国百强餐饮企业一起齐聚...</a>-->
                    <!--<a href="#">全国百强餐饮企业一起齐聚...</a>-->
                    <!--<a href="#">全国百强餐饮企业一起齐聚...</a>-->
                    <!--<a href="#">全国百强餐饮企业一起齐聚...</a>-->
                    <!--</div>-->
                    <!--<div style="margin-left: -500px">-->
                    <!--<a href="#">从习近平暖心话语读懂“非”比寻常兄弟情 一带一路</a>-->
                    <!--<a href="#">从习近平暖心话语读懂“非”比寻常兄弟情 一带一路</a>-->
                    <!--<a href="#">从习近平暖心话语读懂“非”比寻常兄弟情 一带一路</a>-->
                    <!--<a href="#">从习近平暖心话语读懂“非”比寻常兄弟情 一带一路</a>-->
                    <!--<a href="#">从习近平暖心话语读懂“非”比寻常兄弟情 一带一路</a>-->

                    <!--</div>-->
                    <!--</div>-->


                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="资讯" name="first">
                            <ul>
                                <li>全国百强餐饮企业一起齐聚...</li>
                                <li>全国百强餐饮企业一起齐聚...</li>
                                <li>全国百强餐饮企业一起齐聚...</li>
                                <li>全国百强餐饮企业一起齐聚...</li>
                                <li>全国百强餐饮企业一起齐聚...</li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="问答" name="second">
                            <ul>
                                <li>全国万强餐饮企业一起齐聚...</li>
                                <li>全国万强餐饮企业一起齐聚...</li>
                                <li>全国万强餐饮企业一起齐聚...</li>
                                <li>全国万强餐饮企业一起齐聚...</li>
                                <li>全国万强餐饮企业一起齐聚...</li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>


                </div>
            </div>
        </div>

        <!--热门品牌开始-->

        <div class="hot-brands">
            <div class="hb w">
                <!--标题-->
                <div class="com-title2 clearfix">
                    <h2>热门品牌</h2>
                    <router-link tag="a" to="/brand">更多</router-link>
                </div>

                <!--品牌列表-->
                <ul class="hb-nav">
                    <li>
                        <a href="#">
                            <img src="./images/b01.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>粥员外</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b02.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>灶掌柜</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b03.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>辣么棒麻辣烫</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b04.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>湘口福</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b05.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>厉害了炒饭</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b06.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>蜀帅麻辣香锅</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b07.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>煲百味</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b08.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>韩巴巴炸鸡</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b09.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>暖小稻</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/b10.jpg" alt="">
                            <div class="item-content">
                                <div class="clearfix">
                                    <span>我呀便当</span>
                                    <span>加盟</span>
                                </div>
                                <div class="clearfix">
                                    <span>加盟商好评率98%</span>
                                    <span>开店：100家</span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!--行业动态开始-->

        <div class="dynamic">
            <div class="dc w">
                <!--标题-->
                <!--标题-->
                <div class="com-title2 clearfix">
                    <h2>行业动态</h2>
                    <a href="#">更多</a>
                </div>
                <!--内容-->
                <div class="dynamic-content">
                    <!--左-->
                    <div class="dc-left">
                        <a href="#">
                            <img src="./images/dc_left.jpg" alt="">
                            <p>没有经验如何开起自己的店？</p>
                        </a>
                    </div>
                    <!--中-->
                    <div class="dc-mid">
                        <ul class="dc-mid-nav">
                            <li v-for="(item,index) in dynamics.slice(0,4)" :key="index" :data-uidpk="item.uidpk" @click="toDetail(item.uidpk)">
                                <a href="javascript:void(0);">
                                    <h2>{{ item.title }}</h2>
                                    <p>{{ item.description }}</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!--有-->
                    <div class="dc-right">
                        <a href="#">
                            <img src="./images/dc_right.jpg" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!--最新入驻、加盟资讯、创业问答等开始-->

        <div class="three-cell">
            <div class="tc-content w">
                <!--左-->
                <div class="tc-left">
                    <!--标题-->
                    <div class="com-title2 clearfix">
                        <h2>最新入驻</h2>
                        <a href="#">更多</a>
                    </div>

                    <!--轮播图-->
                    <div class="swiper-container" id="swiper-container2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in newComing" :key="index" :data-uidpk="item.uidpk" @click="toDetail(item.uidpk)">
                                <a href="javascript:void(0);">
                                    <img :src="item.articleThumbnailBean.thumbnailurl" alt="">
                                </a>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <!--中-->
                <div class="tc-mid">
                    <!--标题-->
                    <div class="com-title2 clearfix">
                        <h2>加盟资讯</h2>
                        <a href="#">更多</a>
                    </div>

                    <ul class="dc-mid-nav">
                        <li v-for="(item,index) in join.slice(0,3)" :key="index" :data-uidpk="item.uidpk" @click="toDetail(item.uidpk)">
                            <a href="javascript:void(0);">
                                <h2>{{ item.title }}</h2>
                                <p>{{ item.description }}</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--右-->
                <div class="tc-right">
                    <!--标题-->
                    <div class="com-title2 clearfix">
                        <h2>创业问答</h2>
                        <a href="#">更多</a>
                    </div>
                    <ul class="dc-mid-nav">
                        <li v-for="(item,index) in question.slice(0,3)" :key="index" :data-uidpk="item.uidpk" @click="toDetail(item.uidpk)">
                            <a href="javascript:void(0);">
                                <h2>港式甜点加盟店的十大品牌</h2>
                                <p>市场经济的繁荣，品质生活的提升，使得人们的创业激情高涨市场经济的繁荣，品质生活的提升，使得人们的创业激情高涨</p>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>

        <!--精选展会、美食攻略等开始-->

        <div class="t-cell">
            <div class="t-cell-content w">
                <div class="tcc-left" v-for="(item,index) in join.slice(0,1)" :key="index" :data-uidpk="item.uidpk" @click="toDetail(item.uidpk)">
                    <!--标题-->
                    <div class="com-title2 clearfix">
                        <h2>精选展会</h2>
                        <!--<a href="#">查看往期</a>-->
                        <router-link tag="a" to="/exhibition">查看往期</router-link>
                    </div>
                    <!--图片-->
                    <div class="tcc-left-img">
                        <a href="javascript:void(0);">
                            <img :src="item.articleThumbnailBean.thumbnailurl" alt="">
                        </a>
                    </div>
                    <!--底部信息-->
                    <div class="tcc-left-info">
                        <h2>{{ item.title }}</h2>
                        <div>
                    <span>
                        <i class="iconfont">&#xe604;</i>
                        {{ item.source }}
                    </span>
                            <span>
                        <i class="iconfont">&#xe620;</i>
                        <i>23104人</i>
                        <i class="iconfont">&#xe61e;</i>
                        <i>已咨询：710人</i>
                    </span>
                        </div>
                    </div>


                </div>
                <div class="tcc-right">
                    <!--标题-->
                    <div class="com-title2 clearfix">
                        <h2>美食攻略</h2>
                        <router-link tag="a" to="/news/1" href="#">更多</router-link>
                    </div>
                    <ul class="tcc-right-nav">
                        <!-- 美食攻略 -->
                        <li v-for="(item,index) in join" :key="index" :data-uidpk="item.uidpk" @click="toDetail(item.uidpk)">
                            <a href="javascript:void(0);" class="clearfix">
                                <img src="./images/tcc_right_img.png" alt="">
                                <div>
                                    <h2>{{ item.title }}</h2>
                                    <div class="clearfix">
                                        <span>{{ item.source }}</span>
                                        <span>发布于：{{ item | getTime( pattern = "YYYY-MM-DD HH:mm:ss") }}</span>
                                    </div>
                                    <p>{{ item.description }}</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <foot></foot>
    </div>
</template>

<script>

    import Swiper from "swiper"
    import tabNav from "@/components/tabBar/tabBar"
    import foot from "@/components/foot/foot"

    export default {
        name: "Home",
        data() {
            return {
                // 资讯问答tab的默认项
                activeName: "first",
                // 热门品牌 1
                hot: [],

                // 行业动态 8
                dynamics: [],

                // 最新入驻 9
                newComing: [],

                // 加盟咨询 10
                join: [],

                // 创业问答 11
                question: [],

                // 精选展会 12
                exhibition: [],

                // 美食攻略 13
                foods: [],
            }
        },
        methods: {
            swiperInit(eleId) {
                var mySwiper = new Swiper(eleId, {
                    loop: true, // 循环模式选项
                    autoplay: true,

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                })
            },
            handleClick(tab, event) {

            },

            // 获取热门品牌
            getHot() {
                this.axios.get(this.api.getNewsApi + "1")
                    .then(res => {
                        // console.log(res)
                        if (res.status === 200) {
                            this.hot = res.data
                        }
                    })
            },
            // 获取行业动态
            getDynamics() {
                this.axios.get(this.api.getNewsApi + "8")
                    .then(res=>{
                        // console.log(res.data)
                        if(res.status === 200){
                            this.dynamics = res.data
                        }
                    })
            },
            // 获取最新加盟
            getNewComming(){
                this.axios.get(this.api.getNewsApi + "9")
                    .then(res=>{
                        // console.log(res.data)
                        if(res.status === 200){
                            this.newComing = res.data
                            // console.log(this.newComing)
                        }
                    })
            },
            // 获取加盟咨询
            getJoin(){
                this.axios.get(this.api.getNewsApi + "10")
                    .then(res=>{
                        // console.log(res.data)
                        if(res.status === 200){
                            this.join = res.data
                            // console.log(this.join)
                        }
                    })
            },
            // 获取创业问答
            getQuestion(){
                this.axios.get(this.api.getNewsApi + "11")
                    .then(res=>{
                        // console.log(res.data)
                        if(res.status === 200){
                            this.question = res.data
                            // console.log(this.question)
                        }
                    })
            },
            // 获取精选展会
            getExhibition(){
                this.axios.get(this.api.getNewsApi + "12")
                    .then(res=>{
                        // console.log(res.data)
                        if(res.status === 200){
                            this.exhibition = res.data
                            // console.log(this.exhibition)
                        }
                    })
            },
            // 获取美食攻略
            getFoods(){
                this.axios.get(this.api.getNewsApi + "13")
                    .then(res=>{
                        // console.log(res.data)
                        if(res.status === 200){
                            this.foods = res.data
                            console.log(this.foods)
                        }
                    })
            },
            getAll() {
                this.getHot()
                this.getDynamics()
                this.getNewComming()
                this.getJoin()
                this.getQuestion()
                this.getExhibition()
                this.getFoods()
            },
            // 跳转详情
            toDetail(id){
                console.log(id)
                this.$router.push({
                    name:"newsDetails",
                    params:{
                        sid:id
                    }
                })
            }
        },
        mounted() {
            this.swiperInit("#swiper-container1");
            this.swiperInit("#swiper-container2");
        },
        created() {
            this.getAll()
        },
        components: {
            foot, tabNav
        }
    }
</script>

<style lang="less">
    img[lazy="loading"] {
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    @import "../../../node_modules/swiper/dist/css/swiper.min.css";

    #home {
        /* 顶部三栏 */

        .top {
            padding-bottom: 39px;

            /* 左边的 */

            .left-nav {
                background-color: #fff;
                width: 159px;
                margin-right: 10px;

                li {
                    cursor: pointer;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    font-size: 16px;
                    color: #666;
                    border-bottom: 1px solid #efefef;

                    i {
                        margin-right: 5px;
                        font-weight: bold;
                        font-size: 18px;
                    }

                    &:hover {
                        color: #fe2929;
                    }

                    &.qrcode {
                        height: 161px;

                        a {
                            img {
                                margin: 29px auto 0 auto;
                                display: block;
                                width: 120px;
                            }
                        }
                    }
                }
            }

            /* 中间的 */

            .mid-box {
                padding-top: 10px;
                width: 773px;
                height: 50px;
                /*background-color: #4c6cff;*/

                .swiper-container {
                    //background-color: #FF0000;
                    width: 773px;
                    height: 270px;
                    border-radius: 20px;
                    overflow: hidden;
                    margin-bottom: 12px;

                    a {
                        width: 100%;
                        height: 100%;
                        display: block;

                        img {
                            width: 100%;
                            display: block;
                        }
                    }

                    /* 轮播点的样式设置 */

                    .swiper-pagination-bullet {
                        background-color: #fff;
                        opacity: 1;
                        height: 8px;

                        &.swiper-pagination-bullet-active {
                            width: 25px;
                            border-radius: 4px;
                        }
                    }

                    .swiper-button-prev,
                    .swiper-button-next {
                        width: 30px !important;
                        height: 30px !important;
                        background-color: rgba(0, 0, 0, .2) !important;
                        border-radius: 50%;
                        background-size: 7px 44px;
                    }
                }

                /* 品类展示大盒子 */

                .showgoodness {
                    margin-top: 12px;
                    width: 773px;
                    height: 348px;
                    background: #fff;
                    padding: 9px 9px 19px 9px;
                    /* 品牌排行 */

                    .rank {
                        width: 100%;
                        height: 149px;
                        //background-color: pink;
                    }

                    /* 精品推荐 */

                    .recommend {
                        width: 100%;
                        height: 149px;
                        margin-top: 26px;
                        //background-color: #007aff;
                    }

                    .rank,
                    .recommend {
                        /* 导航 */

                        .com-title {
                            a {
                                margin-right: 19px;
                                font-size: 12px;
                                color: #666;

                                &:hover {
                                    color: #f32222;
                                }
                            }

                            .one {
                                display: inline-block;
                                text-align: center;
                                line-height: 25px;
                                width: 82px;
                                height: 25px;
                                border-radius: 12px;
                                border: solid 1px #f32222;
                                color: #f32222;
                                margin-right: 19px;
                            }

                            .rank-btn {
                                float: right;
                                border: none;
                                background-color: transparent;
                                color: #666;
                                font-size: 12px;
                                cursor: pointer;
                                line-height: 25px;
                                margin-right: 0;
                            }
                        }

                        /* 内容 */

                        .com-content {
                            margin-top: 14px;
                            display: flex;
                            justify-content: space-between;

                            a {
                                flex: 0 0 180px;
                                height: 112px;
                                display: inline-block;
                                border-radius: 5px;
                                overflow: hidden;

                                &:hover {
                                    img {
                                        transform: translateX(-2px);
                                        opacity: .9;
                                    }
                                }

                                img {
                                    width: 100%;
                                    display: block;
                                    transition: transform 0.1s;
                                }
                            }
                        }
                    }
                }
            }

            /* 右边的 */

            .right-box {
                width: 199px;
                height: 640px;
                //background-color: pink;
                padding-top: 10px;
                /* 上 */

                .rb-top {
                    width: 201px;
                    height: 40px;
                    background-color: #fff;
                }

                /* 中 */

                .rb-mid {
                    width: 200px;
                    height: 388px;
                    background-color: #ffffff;
                    margin: 12px 0 24px 0;
                    padding-top: 10px;

                    .mid-title {
                        p {
                            text-align: center;

                            &:nth-of-type(1) {
                                font-size: 18px;
                                color: #333;
                                font-weight: bold;
                                line-height: 18px;
                                margin-bottom: 2px;
                            }

                            &:nth-of-type(2) {
                                font-size: 10px;
                                color: #c1c1c1;
                                line-height: 10px;
                            }
                        }

                        .mid-nav {
                            padding-left: 10px;
                            padding-right: 10px;

                            li {
                                height: 35px;
                                border-bottom: 1px solid #eaeaea;
                                line-height: 35px;
                                cursor: pointer;
                                transition: transform 0.1s;

                                &:hover {
                                    transform: translateX(-5px);
                                }

                                span {
                                    &:nth-of-type(1) {

                                        background: url("./images/slid_04.png") no-repeat center center;
                                        background-size: contain;
                                    }

                                }

                                span {
                                    &:nth-of-type(1) {
                                        display: inline-block;
                                        font-style: normal;
                                        width: 15px;
                                        height: 15px;
                                        font-size: 12px;
                                        color: #fff;
                                        line-height: 15px;
                                        text-align: center;
                                    }

                                    &:nth-of-type(2) {
                                        padding-left: 5px;
                                        margin-right: 65px;
                                    }

                                    &:nth-of-type(3) {
                                        display: inline-block;
                                        vertical-align: text-top;
                                        width: 13px;
                                        height: 15px;
                                    }

                                    &:last-child {
                                        padding-left: 5px;
                                    }
                                }

                                &:nth-of-type(1) {
                                    span {
                                        &:nth-of-type(1) {

                                            background: url("./images/slid_01.png") no-repeat center center;
                                            background-size: contain;

                                        }


                                        &:nth-of-type(3) {

                                            background: url("./images/hot_01.png") no-repeat center center;
                                            background-size: contain;
                                        }
                                    }
                                }

                                &:nth-of-type(2) {
                                    span {
                                        &:nth-of-type(1) {

                                            background: url("./images/slid_02.png") no-repeat center center;
                                            background-size: contain;

                                        }


                                        &:nth-of-type(3) {

                                            background: url("./images/hot_02.png") no-repeat center center;
                                            background-size: contain;
                                        }
                                    }
                                }

                                &:nth-of-type(3) {
                                    span {
                                        &:nth-of-type(1) {

                                            background: url("./images/slid_03.png") no-repeat center center;
                                            background-size: contain;

                                        }


                                        &:nth-of-type(3) {

                                            background: url("./images/hot_03.png") no-repeat center center;
                                            background-size: contain;
                                        }
                                    }
                                }

                                &:last-child {
                                    border-bottom: none;
                                }
                            }
                        }
                    }
                }

                /* 下 */

                /*.rb-bottom {*/
                /*position: relative;*/
                /*width: 200px;*/
                /*height: 166px;*/
                /*background-color: #ffffff;*/

                /*.tab-nav {*/
                /*padding-left: 37px;*/
                /*padding-top: 14px;*/
                /*margin-bottom: 13px;*/

                /*li {*/
                /*float: left;*/
                /*height: 31px;*/
                /*color: #333;*/
                /*font-size: 20px;*/
                /*cursor: pointer;*/

                /*&.tab-active {*/
                /*color: #f32222;*/
                /*border-bottom: 2px solid #f32222;*/
                /*}*/

                /*&:nth-of-type(1) {*/
                /*margin-right: 52px;*/
                /*}*/
                /*}*/
                /*}*/

                /*.tab-content {*/
                /*overflow: hidden;*/
                /*padding-left: 25px;*/
                /*padding-right: 14px;*/

                /*div {*/
                /*float: left;*/

                /*a {*/
                /*display: block;*/
                /*width: 160px;*/
                /*font-size: 12px;*/
                /*line-height: 20px;*/
                /*color: #333;*/
                /*overflow: hidden;*/
                /*white-space: nowrap;*/
                /*text-overflow: ellipsis;*/
                /*position: relative;*/
                /*padding-left: 11px;*/

                /*&::before {*/
                /*content: "";*/
                /*position: absolute;*/
                /*width: 5px;*/
                /*height: 5px;*/
                /*border-radius: 50%;*/
                /*background-color: #f32222;*/
                /*top: 7px;*/
                /*left: 0;*/
                /*}*/

                /*&:hover {*/
                /*color: #f32222;*/

                /*&::before {*/
                /*background-color: #333;*/
                /*}*/
                /*}*/
                /*}*/
                /*}*/
                /*}*/
                /*}*/

                .rb-bottom {
                    position: relative;
                    width: 200px;
                    height: 166px;
                    background-color: #ffffff;

                    // 居中
                    .el-tabs__nav.is-top {
                        transform: translateX(40px) !important;
                    }

                    // 底部边框颜色
                    .el-tabs__active-bar.is-top {
                        background-color: #f32222;
                    }

                    // 鼠标经过显示红色  以及文字大小
                    .el-tabs__item {
                        font-size: 20px;

                        &:hover {
                            color: #f32222;
                        }
                    }

                    // 改变选中文字颜色
                    .el-tabs__item.is-active {
                        color: #f32222;
                    }

                    // 去除大盒子底边框
                    .el-tabs__nav-wrap::after {
                        height: 0;
                    }

                    // 内容区域
                    .el-tabs__content {
                        ul {
                            width: 100%;

                            li {
                                padding-left: 25px;
                                padding-right: 14px;
                                width: 100%;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                color: #333;
                                font-size: 12px;
                                line-height: 21px;
                                cursor: pointer;
                                position: relative;

                                &:hover {
                                    color: #f32222;
                                }

                                // 小圆点
                                &:after {
                                    content: "";
                                    position: absolute;
                                    width: 5px;
                                    height: 5px;
                                    border-radius: 50%;
                                    background-color: #f32222;
                                    left: 15px;
                                    top: 50%;
                                    transform: translateY(-50%);
                                }
                            }
                        }
                    }
                }
            }
        }


        /* 所有分类和热门品牌 的 公共头部标题 */

        .com-title2 {
            height: 40px;
            border-bottom: 2px solid #f32222;
            padding-left: 10px;
            line-height: 40px;
            margin-bottom: 19px;

            h2 {

                float: left;
                position: relative;
                font-size: 20px;
                color: #333;

                &::before {
                    content: "";
                    position: absolute;
                    left: -10px;
                    top: 10px;
                    width: 4px;
                    height: 20px;
                    background-color: #f32222;
                }
            }

            a {
                float: right;
                font-size: 14px;
            }
        }

        /* 新闻版块公共样式 */

        .dc-mid-nav {
            li {
                padding-bottom: 12px;
                height: 78px;
                padding-top: 20px;

                border-bottom: 1px solid #eaeaea;

                &:nth-of-type(1) {
                    height: 58px;
                    padding-top: 0;
                }

                a {
                    display: block;
                    width: 100%;
                    height: 100%;


                    h2 {
                        font-size: 20px;
                        color: #333;
                        line-height: 20px;
                        margin-bottom: 12px;
                    }

                    p {
                        width: 448px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 14px;
                        color: #333;
                        line-height: 14px;
                    }

                    &:hover {
                        h2 {
                            color: #f32222;
                        }
                    }
                }
            }
        }

        /* 热门品牌开始 */

        .hot-brands {
            height: 518px;
            background-color: #fff;

            .hb {
                height: 100%;


                /* 品牌列表 */

                .hb-nav {
                    display: flex;
                    justify-content: space-between;
                    flex-flow: row wrap;

                    li {
                        flex: 0 0 222px;
                        height: 204px;
                        margin-bottom: 21px;
                        transition: box-shadow 0.1s;

                        &:hover {
                            box-shadow: 3px 7px 16px 2px rgba(0, 0, 0, 0.21);
                        }

                        a {
                            display: block;
                            width: 100%;
                            height: 100%;
                            //background-color: pink;

                            img {
                                width: 100%;
                                height: 140px;
                                display: block;
                            }

                            .item-content {
                                width: 100%;
                                height: 64px;
                                //background-color: cyan;
                                padding: 10px;
                                border: 1px solid #eaeaea;
                                border-top: none;

                                div {
                                    &:nth-of-type(1) {
                                        margin-bottom: 7px;

                                        span {
                                            &:nth-of-type(1) {
                                                float: left;
                                                font-size: 20px;
                                                height: 20px;
                                                line-height: 20px;
                                                color: #333;
                                            }

                                            &:nth-of-type(2) {
                                                float: right;
                                                width: 45px;
                                                height: 23px;
                                                background-color: #ff3434;
                                                color: #fff;
                                                line-height: 23px;
                                                text-align: center;
                                            }
                                        }
                                    }

                                    &:nth-of-type(2) {
                                        span {
                                            font-size: 12px;
                                            color: #666;

                                            &:nth-of-type(1) {
                                                float: left;
                                            }

                                            &:nth-of-type(2) {
                                                float: right;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        /* 行业动态开始 */

        .dynamic {
            height: 400px;
            background-color: #fff;

            .com-title2 {
                margin-bottom: 24px;
            }

            /* 内容 */

            .dynamic-content {
                width: 100%;
                height: 450px;
                display: flex;
                justify-content: space-between;
                /* 左 */

                .dc-left {
                    flex: 0 0 450px;
                    height: 290px;
                    background-color: #8effa9;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: relative;

                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }

                        p {
                            width: 100%;
                            height: 55px;
                            background-color: rgba(19, 19, 19, .3);
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            color: #fff;
                            font-size: 20px;
                            line-height: 55px;
                            padding-left: 21px;
                            overflow: hidden;
                        }
                    }
                }

                /* 中 */

                .dc-mid {
                    flex: 0 0 448px;
                    height: 290px;
                    //background-color: pink;

                    .dc-mid-nav {
                        li {
                            padding-bottom: 12px;
                            height: 78px;
                            padding-top: 20px;

                            border-bottom: 1px solid #eaeaea;

                            &:nth-of-type(1) {
                                height: 58px;
                                padding-top: 0;
                            }

                            a {
                                display: block;
                                width: 100%;
                                height: 100%;


                                h2 {
                                    font-size: 20px;
                                    color: #333;
                                    line-height: 20px;
                                    margin-bottom: 12px;
                                }

                                p {
                                    width: 448px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-size: 14px;
                                    color: #333;
                                    line-height: 14px;
                                }

                                &:hover {
                                    h2 {
                                        color: #f32222;
                                    }
                                }
                            }
                        }
                    }
                }

                /* 右 */

                .dc-right {
                    flex: 0 0 209px;
                    height: 290px;
                    background-color: #3fceff;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;

                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

        }

        /* 最新入驻、加盟资讯、创业问答等开始 */

        .three-cell {
            height: 314px;
            background-color: #fff;

            .tc-content {
                height: 100%;
                display: flex;
                justify-content: space-between;
            }

            /* 左 */

            .tc-left {
                flex: 0 0 185px;
                height: 100%;
                //background-color: #8effa9;
                padding: 9px;
                border: 1px solid #eaeaea;

                .com-title2 {
                    margin-bottom: 10px !important;
                }

                .swiper-container {
                    width: 170px;
                    height: 244px;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;

                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }

                }

                /* 轮播点样式 */

                .swiper-pagination-bullet {
                    width: 21px;
                    height: 8px;
                    background-color: #fff;
                    border-radius: 4px;
                    opacity: 1;

                    &.swiper-pagination-bullet-active {
                        background-color: #f32222;
                    }
                }
            }

            /* 中 */

            .tc-mid {
                flex: 0 0 469px;
                height: 100%;
                //background-color: pink;
                padding: 9px;
                border: 1px solid #eaeaea;

                .dc-mid-nav {
                    li {
                        a {
                            p {
                                color: #666;
                            }
                        }
                    }
                }
            }

            /* 右 */

            .tc-right {
                flex: 0 0 468px;
                height: 100%;
                //background-color: #ffd3de;
                padding: 9px;
                border: 1px solid #eaeaea;

                .dc-mid-nav {
                    li {
                        a {
                            p {
                                color: #666 !important;
                            }
                        }
                    }
                }
            }
        }

        /* 精选展会、美食攻略等开始 */

        .t-cell {
            height: 555px;
            background-color: #fff;
            padding-top: 29px;
            //margin-bottom: 102px;
            padding-bottom: 102px;

            .t-cell-content {
                height: 100%;
                display: flex;
                justify-content: space-between;
                /* 左边 */

                .tcc-left {
                    flex: 0 0 444px;
                    height: 100%;
                    border: 1px solid #eaeaea;
                    padding: 9px;
                    /* 图片 */

                    .tcc-left-img {
                        margin-bottom: 26px;

                        a {
                            width: 100%;
                            height: 100%;
                            display: block;

                            img {
                                display: block;
                                width: 100%;
                            }
                        }
                    }

                    /* 底部信息 */

                    .tcc-left-info {
                        width: 100%;
                        height: 46px;
                        padding-left: 9px;
                        //background-color: #f1f3ce;

                        h2 {
                            font-size: 20px;
                            color: #333;
                            margin-bottom: 6px;
                        }

                        div {
                            padding-left: 13px;

                            i {
                                font-style: normal;
                                font-size: 15px;
                            }

                            span {
                                &:nth-of-type(1) {
                                    float: left;
                                    color: #333;
                                    font-size: 12px;
                                    line-height: 17px;

                                    i {
                                        color: #8bb1ff;
                                        line-height: 17px;
                                        margin-right: 3px;
                                        animation: jump 2s infinite;
                                    }
                                }

                                &:nth-of-type(2) {
                                    float: right;

                                    i {
                                        &:nth-of-type(1),
                                        &:nth-of-type(3) {
                                            color: #8bb1ff;
                                            margin-right: 3px;
                                        }

                                        &:nth-of-type(2),
                                        &:nth-of-type(4) {
                                            color: #333;
                                            font-size: 12px !important;
                                            margin-right: 13px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                /* 右边 */

                .tcc-right {
                    flex: 0 0 696px;
                    height: 100%;
                    border: 1px solid #eaeaea;
                    padding: 9px;

                    .tcc-right-nav {
                        li {
                            height: 170px;
                            padding: 0 45px 20px 5px;

                            a {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: space-between;

                                img {
                                    flex: 0 0 233px;
                                    height: 145px;
                                    margin-right: 22px;
                                }

                                div {
                                    flex: 0 0 382px;
                                    padding-top: 15px;

                                    h2 {
                                        font-size: 20px;
                                        color: #333;
                                    }

                                    div {
                                        padding-top: 0;
                                        margin-top: 15px;
                                        margin-bottom: 11px;

                                        span {
                                            font-size: 12px;
                                            color: #8bb1ff;
                                            margin-right: 15px;
                                            font-size: 12px;
                                        }
                                    }

                                    p {
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        font-size: 14px;
                                        color: #666;
                                    }
                                }
                            }
                            &:nth-of-type(1) {
                                border-bottom: 1px solid #eaeaea;
                            }
                            &:nth-of-type(2) {
                                margin-top: 20px;
                            }
                        }
                    }
                }
            }
        }
    }

</style>
